<template>
	<view class="list-container">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<text class="navbar-title">列表</text>
				<view class="navbar-right">
					<view class="add-btn" @click="goToEdit">
						<text class="add-icon">+</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="search-wrapper">
					<view class="search-icon">
						<u-icon name="search" color="rgba(139,90,43,0.8)" size="18"></u-icon>
					</view>
					<input 
						class="search-input"
						v-model="searchKeyword" 
						placeholder="搜索备忘录..." 
						placeholder-style="color: rgba(139,90,43,0.6)"
						@input="searchMemos"
						@confirm="searchMemos"
					/>
					<view v-if="searchKeyword" class="clear-icon" @click="clearSearch">
						<u-icon name="close-circle-fill" color="rgba(139,90,43,0.6)" size="16"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 分类筛选 -->
			<view class="category-filter">
				<scroll-view scroll-x class="category-scroll">
					<view class="category-item" 
						  :class="{ active: selectedCategory === '' }"
						  @click="filterByCategory('')">
						<text class="category-emoji">📋</text>
						<text class="category-name">全部</text>
					</view>
					<view v-for="category in defaultCategories" :key="category.value" 
						  class="category-item"
						  :class="{ active: selectedCategory === category.value }"
						  @click="filterByCategory(category.value)">
						<text class="category-emoji">{{ category.emoji }}</text>
						<text class="category-name">{{ category.name }}</text>
					</view>
				</scroll-view>
			</view>
			
			<!-- 备忘录列表 -->
			<view class="memo-list">
				<view v-if="filteredMemos.length === 0" class="empty-state">
					<u-icon name="file-text" color="#ccc" size="60"></u-icon>
					<text class="empty-text">暂无备忘录</text>
				</view>
				<view v-for="memo in filteredMemos" :key="memo.id" 
					  class="memo-item" 
					  :class="{ 'important-memo': memo.important || memo.is_important }"
					  @click="viewMemo(memo)">
					<view class="memo-header">
						<view class="memo-title">{{ memo.title }}</view>
						<view class="memo-time">{{ formatTime(memo.createTime || memo.created_at) }}</view>
					</view>
					<view class="memo-content">{{ memo.content }}</view>
					<view class="memo-footer">
						<view class="memo-category">
							<text class="category-emoji">{{ getCategoryEmoji(memo.category) }}</text>
							<text class="category-text">{{ getCategoryName(memo.category) }}</text>
						</view>
						<view v-if="memo.important || memo.is_important" class="important-badge">
							<u-icon name="star-fill" color="#ff6b6b" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
	data() {
		return {
			statusBarHeight: 0,
			searchKeyword: '',
			selectedCategory: '',
			memos: [],
			defaultCategories: [
				{ name: '普通', value: 'general', emoji: '📝' },
				{ name: '工作', value: 'work', emoji: '💼' },
				{ name: '生活', value: 'life', emoji: '🏠' },
				{ name: '学习', value: 'study', emoji: '📚' },
				{ name: '旅行', value: 'travel', emoji: '✈️' },
				{ name: '购物', value: 'shopping', emoji: '🛒' },
				{ name: '健康', value: 'health', emoji: '💪' },
				{ name: '娱乐', value: 'entertainment', emoji: '🎮' },
				{ name: '管理', value: 'admin', emoji: '🔧' }
			]
		}
	},
	computed: {
		filteredMemos() {
			let result = this.memos
			
			// 按分类筛选
			if (this.selectedCategory) {
				result = result.filter(memo => memo.category === this.selectedCategory)
			}
			
			// 按关键词搜索
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				result = result.filter(memo => 
					memo.title.toLowerCase().includes(keyword) || 
					memo.content.toLowerCase().includes(keyword)
				)
			}
			
			// 智能排序：重要的备忘录置顶，然后按时间排序
			return result.sort((a, b) => {
				// 重要的排在前面
				if (a.important && !b.important) return -1
				if (!a.important && b.important) return 1
				// 同等重要性下按创建时间降序排列
				const timeA = new Date(a.createTime || a.created_at)
				const timeB = new Date(b.createTime || b.created_at)
				return timeB - timeA
			})
		}
	},
	onLoad() {
		this.getStatusBarHeight()
		this.loadMemos()
	},
	onShow() {
		this.loadMemos()
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			// 微信小程序需要特殊处理
			if (statusBarHeight === 0) {
				statusBarHeight = 25; // 微信小程序默认状态栏高度
			}
			// 确保最小高度，避免文字被遮挡
			statusBarHeight = Math.max(statusBarHeight, 22);
			console.log('微信小程序状态栏高度:', statusBarHeight);
			// #endif
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			// H5环境不需要状态栏
			statusBarHeight = 0;
			// #endif
			
			// #ifdef APP-PLUS
			// APP环境使用原始高度
			statusBarHeight = statusBarHeight || 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		loadMemos() {
			const currentUser = storage.getCurrentUser()
			if (currentUser) {
				this.memos = storage.getUserMemos(currentUser.id)
			}
		},
		searchMemos() {
			// 搜索逻辑在computed中处理
		},
		clearSearch() {
			this.searchKeyword = ''
		},
		filterByCategory(category) {
			this.selectedCategory = category
		},
		getCategoryName(categoryValue) {
			const category = this.defaultCategories.find(cat => cat.value === categoryValue)
			return category ? category.name : '普通'
		},
		getCategoryEmoji(categoryValue) {
			const category = this.defaultCategories.find(cat => cat.value === categoryValue)
			return category ? category.emoji : '📝'
		},
		viewMemo(memo) {
			uni.navigateTo({
				url: `/pages/subPack/index/detail?id=${memo.id}`
			})
		},
		goToEdit() {
			uni.navigateTo({
				url: '/pages/subPack/index/edit'
			})
		},
		formatTime(timeStr) {
			// 兼容不同的时间字段
			const time = timeStr || new Date().toISOString()
			const date = new Date(time)
			const now = new Date()
			const diff = now - date
			
			if (diff < 60000) {
				return '刚刚'
			} else if (diff < 3600000) {
				return `${Math.floor(diff / 60000)}分钟前`
			} else if (diff < 86400000) {
				return `${Math.floor(diff / 3600000)}小时前`
			} else {
				return date.toLocaleDateString()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.list-container {
	min-height: 100vh;
	background: #f8f9fa;
}

.status-bar {
	background: #6c5ce7;
}

.custom-navbar {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	/* #ifdef MP-WEIXIN */
	padding: 24rpx 30rpx 16rpx 30rpx;
	/* #endif */
	/* #ifdef APP-PLUS */
	padding: 20rpx 30rpx;
	/* #endif */
	/* #ifdef H5 */
	padding: 20rpx 30rpx;
	/* #endif */
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}

.navbar-right {
	display: flex;
	align-items: center;
}

.add-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.add-icon {
	font-size: 32rpx;
	color: white;
	font-weight: bold;
}

.content {
	padding: 15px;
	position: relative;
	z-index: 5;
}

.search-bar {
	margin-bottom: 15px;
}

.search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: white;
	border: 1px solid #e8e8e8;
	border-radius: 25px;
	padding: 0 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
}

.search-wrapper:focus-within {
	background: white;
	border-color: #6c5ce7;
	box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

.search-icon {
	margin-right: 10px;
	display: flex;
	align-items: center;
}

.search-input {
	flex: 1;
	height: 44px;
	font-size: 15px;
	color: #8b5a2b;
	background: transparent;
	border: none;
	outline: none;
}

.search-input::placeholder {
	color: rgba(139, 90, 43, 0.6);
}

.clear-icon {
	margin-left: 8px;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.clear-icon:active {
	background: rgba(193, 150, 83, 0.2);
	transform: scale(0.95);
}

.category-filter {
	margin-bottom: 20px;
}

.category-scroll {
	white-space: nowrap;
}

.category-item {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	margin-right: 10px;
	background: rgba(255, 250, 240, 0.8);
	border-radius: 20px;
	font-size: 14px;
	transition: all 0.3s ease;
	border: 1px solid rgba(193, 150, 83, 0.4);
	box-shadow: 0 2px 8px rgba(160, 116, 79, 0.2);
}

.category-item.active {
	background: rgba(255, 250, 240, 0.98);
	border-color: rgba(193, 150, 83, 0.8);
	box-shadow: 0 4px 12px rgba(160, 116, 79, 0.3);
}

.category-item.active .category-emoji,
.category-item.active .category-name {
	color: #8b5a2b;
}

.category-emoji {
	font-size: 16px;
	margin-right: 4px;
	color: #c19653;
}

.category-name {
	color: #c19653;
	font-size: 13px;
}

.memo-list {
	padding-bottom: 20px;
}

.empty-state {
	text-align: center;
	padding: 60px 20px;
}

.empty-text {
	display: block;
	margin-top: 15px;
	color: #8b5a2b;
	font-size: 16px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.memo-item {
	background: rgba(255, 253, 248, 0.98);
	border: 1px solid rgba(193, 150, 83, 0.3);
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 12px;
	transition: all 0.2s ease;
	position: relative;
	box-shadow: 0 3px 10px rgba(160, 116, 79, 0.2);
}

.memo-item:active {
	transform: scale(0.98);
}

.memo-item.important-memo {
	background: rgba(255, 245, 235, 0.98);
	border: 2px solid rgba(205, 92, 92, 0.5);
	box-shadow: 0 4px 15px rgba(205, 92, 92, 0.3);
}

.memo-item.important-memo::before {
	content: '📌';
	position: absolute;
	top: -8px;
	right: -8px;
	background: linear-gradient(135deg, #ff6b6b, #ff8e53);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

.memo-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.memo-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	flex: 1;
}

.memo-time {
	font-size: 12px;
	color: #999;
}

.memo-content {
	font-size: 14px;
	color: #666;
	line-height: 1.5;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.memo-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.memo-category {
	background: rgba(212, 165, 116, 0.2);
	border: 1px solid rgba(193, 150, 83, 0.4);
	padding: 4px 8px;
	border-radius: 12px;
	display: flex;
	align-items: center;
}

.category-emoji {
	font-size: 14px;
	margin-right: 4px;
}

.category-text {
	font-size: 12px;
	color: #c19653;
}

.important-badge {
	display: flex;
	align-items: center;
}
</style>